<script setup>
import { NWatermark, NHighlight, useThemeVars, NTag, NSpace, NCalendar,NGradientText } from "naive-ui";
import { addDays,differenceInDays } from "date-fns";
import { ref } from "vue";
import { KinesisContainer, KinesisElement } from "vue-kinesis";


// 获取主题变量
const themeVars = useThemeVars();

// 定义高亮显示的文本和匹配模式
const text = "FastRay(快光平台)是一个功能齐全样式精美的第三方机动车管理平台，旨在为用户提供快捷直观的服务";
const patterns = ["FastRay", "第三方机动车管理平台"];
const value = ref(addDays(Date.now(), 1).valueOf());
// 计算从 2024-10-25 到今天的天数
const startDate = new Date(2024, 9, 25); // 2024 年 10 月 25 日
const today = new Date();
const daysRunning = ref(differenceInDays(today, startDate)); // 计算天数差

// 用于动态更新点赞数
const likeCount = ref(128); // 初始点赞数
const collectCount = ref(36); // 初始收藏数

const addLike = () => {
  likeCount.value += 1; // 每次点赞时增加1
};

const addcollect = () =>{
  collectCount.value += 1
}


</script>

<template>
  <vue-particles
    color="#ed5a65"
    particle-size="5"
    :particles="100"
    shapeType="star"
    style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none;"
  />
  <div class="content">
    <!-- 水印 -->
    <n-watermark
      content="FastRay"
      cross
      fullscreen
      :font-size="10"
      :line-height="16"
      :width="384"
      :height="384"
      :x-offset="12"
      :y-offset="60"
      :rotate="-15"
    />
    
    <div class="left-content">
      <!-- 高亮显示文本 -->
      <div class="highlight-container">
        <n-highlight
          :text="text"
          :patterns="patterns"
          :highlight-style="{
            padding: '0 6px',
            borderRadius: themeVars.borderRadius,
            display: 'inline-block',
            color: themeVars.baseColor,
            background: themeVars.primaryColor,
            transition: `all .3s ${themeVars.cubicBezierEaseInOut}`,
          }"
        />
      </div>
    </div>

    <div class="right-content">
        <n-space>
            <n-tag type="error">lingdubing</n-tag>
            <n-tag type="success">Vue3</n-tag>
        </n-space>
        <n-space style="margin-top: 20px;">
            <n-tag type="info">快捷</n-tag>
            <n-tag type="success">精美</n-tag>
            <n-tag type="warning">anyway</n-tag>
        </n-space>
        <n-space style="margin-top: 20px;">
            <n-tag type="warning">naive ui</n-tag>
            <n-tag type="info">独钓寒江雪</n-tag>
        </n-space> 
    </div>
  </div>
  <!-- 调整日历大小 -->
   <n-space>
    <n-calendar
    v-model:value="value"
    #="{ year, month, date }"
    class="custom-calendar"
  >
    {{ year }}-{{ month }}-{{ date }}
  </n-calendar>
  <n-gradient-text :size="24" style="margin-top: 40px;margin-left: 60px;color: #ffc90c">
    系统已成功运行{{daysRunning}}天
  </n-gradient-text>
  <!-- 点赞效果 -->
  <KinesisContainer :fps="60">
    <div style="margin-top: 120px;margin-left: -230px">
      <KinesisElement
        :key="likeCount"
        :x="Math.random() * 600"
        :y="Math.random() * 200"
        :scale="1.5"
      >
        <n-tag type="success" style="cursor: pointer;" @click="addLike">👍 {{ likeCount }} Likes</n-tag>
      </KinesisElement>
    </div>
  </KinesisContainer>
  <KinesisContainer :fps="60">
    <div style="margin-top: 120px;margin-left: -100px;width:80px">
      <KinesisElement
        :key="likeCount"
        :x="Math.random() * 600"
        :y="Math.random() * 200"
        :scale="1.5"
      >
        <n-tag type="info" style="cursor: pointer;" @click="addcollect">❤ {{ collectCount }} collections</n-tag>
      </KinesisElement>
    </div>
  </KinesisContainer>
   </n-space>
    
  
</template>

<style scoped>
.content {
  margin-left: 60px;
  margin-top: 20px;
  height: 200px;
  width: 1130px;
  position: relative;
  display: flex; /* 使用flex布局 */
  justify-content: flex-start; /* 向左对齐 */
  align-items: flex-start; /* 将内容顶部对齐 */
  text-align: center; /* 确保文本水平居中 */
}

/* 蓝色背景容器 */
.left-content {
  width: 800px; /* 固定宽度 */
  height: 150px; /* 容器高度 */
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  border-right: 2px dashed gray; /* 只保留右边的黄色边框 */
  border-top: none;
  border-left: 2px dashed grey;
  border-bottom: 2px dashed grey;
  margin-top: -20px;
}

.right-content {
  flex-grow: 1; /* 填充剩余的空间 */
  height: 150px; /* 保持高度一致 */
  padding: 20px;
  border-bottom: 2px dashed grey;
  border-right: 2px dashed gray;
  margin-top: -20px;
}

/* 高亮文本容器 */
.highlight-container {
  font-size: 18px;
  width: 80%; /* 控制最大宽度 */
  text-align: center; /* 水平居中 */
  color: black; /* 设置文字颜色 */
}

/* 自定义日历样式 */
.custom-calendar {
  font-size: 12px; /* 调整字体大小 */
  width: 500px; /* 控制日历宽度 */
  height: 300px; /* 控制日历高度 */
  margin-left: 60px;
}
</style>
